<template>
  <div style="margin: 10px 6% 0 6%">
    <el-row>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="search-card-title">Sequence Design</span>
            <el-col
              :span="4"
              :offset="12"
              style="text-align: end; padding-right: 10px"
            >
              <el-button type="primary" @click="goReg()">SUBMIT</el-button>
              <el-button type="info" @click="goHistory">BACK</el-button>
            </el-col>
          </div>
        </template>
        <el-row style="margin-top: 10px">
          <!--<el-col :span="6">
            <span>Seq Name:</span>
            <el-input v-model="searchInfo.name" style="width: 95%" readonly />
          </el-col>-->
          <el-col :span="6">
            <span>Type:</span>
            <el-select
              v-model="searchInfo.compound"
              style="width: 95%"
              placeholder=""
              @change="
                getSequenceID(searchInfo.projectCode, searchInfo.compound)
              "
            >
              <el-option
                v-for="items in options1"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <span>Project Code:</span>
            <el-select
              v-model="searchInfo.projectCode"
              style="width: 95%"
              placeholder=""
              @change="
                getSequenceID(searchInfo.projectCode, searchInfo.compound)
              "
            >
              <el-option
                v-for="items in options3"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <span>Design Date:</span>
            <el-date-picker
              v-model="searchInfo.date"
              style="width: 95%"
              type="datetime"
              placeholder="Select date and time"
              format="YYYY-MM-DD"
              value-format="YYYYMMDD"
            />
          </el-col>
         <!-- <el-col :span="6">
            <span>CDS Structure:</span>
            <el-input
              v-model="searchInfo.peptide"
              placeholder="IL10/Hg0"
              style="width: 95%"
            />
          </el-col>-->
          <el-col :span="6">
            <span>Note:</span>
            <el-input
              v-model="searchInfo.description"
              placeholder="Note"
              style="width: 95%"
            />
          </el-col>
          <!--<el-col :span="18" style="margin-top: 10px">
            <span>CDS Sequence:</span>
            <el-input
              v-model="searchInfo.nucleotides"
              placeholder="ATGCACAGCTCAGCTCTGCTGTGCTGCCTGGTGCTTCTGACCGGCGTGCGGGCCGAGGTTCAGCTGGTGCAGAGCGGAGCCGAAGTGAAAAAGAGCGGCGAGAGCCTGAAGATCAGCTGTAAAGGCAGCGGTTATAGCTTCACCAGCTACTGGATCGGCTGGGTGCGGCAGATGCCTGGAAAAGGCCTGGAATGGATGGGCATCTTCTACCCCGGCGACAGCTCTACCAGATACAGCCCTTCTTTTCAGGGCCAGGTGACCATTAGCGCTGATAAGTCTGTCAACACCGCCTATCTGCAGTGGTCCTCCCTGAAAGCCAGCGACACAGCCATGTACTACTGCGCCAGAAGGCGGAACTGGGGAAATGCCTTCGACATCTGGGGCCAAGGCACCATGGTGACAGTGTCCAGTGCTTCTACCAAAGGCCCCTCTGTGTTTCCACTGGCCCCTTCCAGCAAGTCCACATCTGGAGGCACCGCCGCCCTGGGATGTCTGGTCAAAGACTACTTCCCCGAGCCTGTGACCGTGTCCTGGAACAGCGGCGCCCTGACAAGCGGCGTGCACACCTTCCCTGCTGTGCTGCAAAGCAGCGGCCTGTATAGCCTGAGCAGCGTGGTGACAGTGCCTAGCAGCTCTCTCGGAACACAGACCTACATCTGCAACGTGAACCACAAGCCTTCTAATACCAAAGTGGATAAGCGGGTTGAGCCTAAGAGCTGCGACAAGACACACACATGTCCTCCGTGCCCCGCCCCTGAGCTACTGGGCGGCCCTAGCGTGTTCCTGTTCCCCCCCAAGCCTAAGGACACCCTGTACATCACCAGAGAGCCCGAAGTGACCTGTGTGGTGGTCGACGTGTCTCACGAAGATCCAGAGGTGAAGTTCAACTGGTACGTGGACGGCGTGGAAGTGCATAATGCCAAGACCAAGCCCAGAGAAGAGCAGTACAACAGCACATACAGAGTGGTGAGCGTGCTGACCGTGCTGCACCAGGACTGGCTGAACGGCAAGGAATACAAGTGCAAGGTGAGCAACAAGGCCCTGCCCGCTCCTATCGAGAAGACAATCAGCAAGGCCAAGGGACAACCTAGAGAGCCCCAGGTGTACACACTGCCTCCAAGCAGAGAGGAAATGACCAAAAACCAGGTTTCTCTGACCTGCCTGGTGAAGGGCTTCTACCCTTCCGATATCGCCGTCGAGTGGGAGAGCAACGGCCAGCCTGAAAACAACTACAAGACGACCCCTCCAGTGCTGGACAGCGATGGCTCTTTTTTCCTGTACAGCAAGCTGACAGTGGACAAGTCCAGATGGCAGCAGGGCAATGTGTTCAGCTGCAGCGTGATGCACGAGGCCCTGCACAACCACTACACCCAGAAGAGCCTGAGCCTGTCACCTGGCAAGTAATGA"
              type="textarea"
              style="width: 95%"
            />
          </el-col>-->
        </el-row>
        <br />
        <el-table
          :data="assembleTable"
          border
          row-key="name"
          indent="0"
          style="width: 100%; margin-bottom: 5px"
          @selection-change="handleSelectionChange1"
        >
          <!--<el-table-column type="selection" width="40" />-->
          <!--           <template #default="scope">
            <el-checkbox v-model="scope.row.isCheck" />
          </template>
        </el-table-column> -->

          <el-table-column fixed label="Components" width="120">
            <template #default="scope">{{ scope.row.seqname }}</template>
          </el-table-column>
          <el-table-column
            property="asmprotein"
            label="Protein Sequence"
            width="600"
            show-overflow-tooltip
          />
          <el-table-column
            property="asmDNA"
            label="DNA Sequence"
            show-overflow-tooltip
          />
          <el-table-column
                  property="seqname"
                  label="CDS Structure"
                  show-overflow-tooltip
          />
        </el-table>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { Download, Select, Pointer, EditPen } from "@element-plus/icons-vue";
import router from "@/router";
export default {
  name: "Linshi",
  components: {
    EditPen,
    Download,
    Select,
    Pointer,
  },
  setup() {
    const goReg = () => {
      router.push("/designLibrary");
    };
    return {
      goReg,
    };
  },
  data() {
    return {
      searchInfo: {
        name: "",
        date: "",
        compound: "",
        source: "",
        projectCode: "",
        time: "",
        cell: "",
        note: "",
        peptide: "",
        nucleotides: "",
        description:"",
      },
      compound: [],
      options1: [
        {
          value: "plasmid",
          label: "Plasmid",
        },
        {
          value: "mRNA",
          label: "mRNA",
        },
      ],
      options3: [
        {
          value: "CDI",
          label: "CDI",
        },
        {
          value: "PSA",
          label: "PSA",
        },
      ],
      assembleTable: [],
    };
  },
  created() {
    this.dataCover();
  },
  methods: {
    getSequenceID(projectCode, compound) {
      let name = "";
      if (projectCode && compound) {
        name = "RV" + "_" + projectCode + "_" + "p001";
      }
      this.searchInfo.name = name;
    },
    goHistory() {
      window.history.go(-1);
    },
    //页面数据选中回显
    dataCover() {
      if (this.$route.params.selectIn) {
        console.log(typeof JSON.parse(this.$route.params.selectIn));
        JSON.parse(this.$route.params.selectIn).forEach((item) => {
          this.assembleTable.push({
            seqname: item.seqname,
            asmprotein: item.asmprotein,
            asmDNA: item.asmDNA,
            struc:item.struc,
          });
          /*this.searchInfo.description =
            item.seqname + "," + this.searchInfo.description;*/
        });
      }
    },
  },
};
</script>

<style scoped>
.search-card-title {
  font-size: 16px;
  font-weight: 500;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.download-icon {
  position: relative;
  top: 3px;
  color: #166fe7;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
.el-card /deep/.el-card__header {
  background-color: #64bce7;
  padding: 6px;
}
.el-card /deep/.el-card__body {
  padding: 8px;
}
.ellipsis {
  width: 160px;
  height: 30px;
  line-height: 29px;
  margin-top: 20px;
  margin-right: 10px;
  background: #64bce7;
  transition: transform 1s;
  text-align: center;
}
.app-item {
  display: inline-block !important;
}
</style>